<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>填写账户信息</title>
<link rel="stylesheet" href="css/amazeui.min.css" />
<link rel="stylesheet" href="css/layout.css"/>
<style type="text/css">
	.am-form{
		width: 500px;
		margin-left: 85px;
	}
	#btn-next{
		padding-left:240px;
	}
</style>
</head>
<body>
<div id="wrapper">
		<div class="container w1000">
			<div id="processor" >
				<ol class="processorBox oh">
					<li class="current">
						<div class="step_inner">
							<span class="icon_step">1</span>
							<h4>填写账户信息</h4>
						</div>
					</li>
					<li>
						<div class="step_inner">
							<span class="icon_step">2</span>
							<h4>填写个人信息</h4>
						</div>
					</li>
					<li>
						<div class="step_inner">
							<span class="icon_step">3</span>
							<h4>填写子女信息</h4>
						</div>
					</li>
					<li>
						<div class="step_inner">
							<span class="icon_step">4</span>
							<h4>完善案情概要</h4>
						</div>
					</li>
				</ol>
				<div class="step_line"></div>
			</div>
				<div class="content w1000">
					<div class="legend"><h3>填写账户信息</h3></div>
					<form class="am-form am-form-horizontal" action="${pageContext.request.contextPath}/account/addAccount.do" method="post">
					    <div class="am-form-group">
					      <label class="am-u-sm-3 am-form-label" for="doc-ipt-email-1">邮件</label>
					      <div class="am-u-sm-9">
					      <input type="email" name="email" class="am-input-sm" id="doc-ipt-email-1" placeholder="输入电子邮件">
					      </div>
					    </div>

					    <div class="am-form-group">
					      <label class="am-u-sm-3 am-form-label" for="doc-ipt-pwd-1">密码</label>
					      <div class="am-u-sm-9">
					      <input type="password" name="password" class="am-input-sm" id="doc-ipt-pwd-1" placeholder="设置个密码吧">
					      </div>
					    </div>

					    <div class="am-form-group">
					      <label class="am-u-sm-3 am-form-label" for="doc-ipt-pwd-1">确认密码</label>
					      <div class="am-u-sm-9">
					      <input type="password" class="am-input-sm" id="doc-ipt-pwd-2" placeholder="再输入一遍咯">
					      </div>
					    </div>
					    <div class="am-form-group">
					      <label class="am-u-sm-3 am-form-label" for="doc-ipt-phone-1">手机号</label>
					      <div class="am-u-sm-9">
					      <input type="text" name="phone" class="am-input-sm" id="doc-ipt-phone-1" placeholder="输入手机号">
					      </div>
					    </div>
						<div class="am-form-group">
					      <label class="am-u-sm-3 am-form-label" for="doc-ipt-vcode-1">验证码</label>
					      <div class="am-u-sm-5">
					      <input type="text" name="verifyCode" class="am-input-sm" id="doc-ipt-vcode-1" placeholder="输入验证码">${msg }
					      </div>
					      <div class="am-u-sm-4">
					      <img id="kaptchaImage" src="${pageContext.request.contextPath}/account/captcha-image.do"/>
					      </div>
				      </div>

					    <div id="btn-next" class="am-form-group">
							<input class="am-btn am-btn-primary" id="submit" type="submit" value="下一步">
						</div>
					</form>
				</div>
		</div><!-- // container end -->
	</div><!-- // wrapper end -->
	<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
	<script type="text/javascript">      
        $(function(){           
            $('#kaptchaImage').click(function () {//生成验证码  
             	$(this).hide().attr('src', '${pageContext.request.contextPath}/account/captcha-image.do?' 
             			+ Math.floor(Math.random()*100) ).fadeIn(); })      
        });
        
        $('#submit').click(function(){
        	console.log($('#doc-ipt-phone-vcode-1').val());
        	$.post("${pageContext.request.contextPath}/account/checkVerifyCode.do", {
				'verifyCode' : $('#doc-ipt-phone-vcode-1').val()
			}, function(data, status) {
				console.log(data);
				if(data=='true'){
					$('#submit').submit();
				}else{
					alert("请检查验证码！！！");
				}
			});
        });
       </script>   
</body>
</html>